<template>
    <div class="flex flex-cs right-pos">
        <!-- <i class="icons el-icon-location" style="margin-right: 10px;"></i> -->
         <img src="@/assets/images/marker-icon-2x.png" alt="" style="width: 12px; margin-right: 10px;">
        <span>当前位置：</span>
        <div class="flex-1 flex flex-cs flex-sb">
            <el-breadcrumb separator="/" >
            <el-breadcrumb-item  :to="{path:item.url}" v-for="(item,index) in tabslist" :key="index"> {{item.menuname}}</el-breadcrumb-item>
            </el-breadcrumb>
            <el-button  size="small" v-if="$route.name !== 'home'" @click="dataManagementPath"><img src="../../public/image/fanhui.png" alt="" width="10px"> 返回首页</el-button>
            <!-- <el-badge :value="badgeNum" :hidden="badgeNum > 0 ? false : true" :max="99" class="item">
                <el-button  size="small" icon="el-icon-shopping-cart-full" @click="dataManagementPath">购物车</el-button>
            </el-badge> -->
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'

    export default {
        name: 'home',
        computed:{
         //从vuex拿数据
            ...mapState(['tabslist', 'badgeNum'])
        },
        data() {
            return {
                
            }
        },
        mounted(){
        },
        methods: {
            dataManagementPath(){
                // this.$store.commit('setBadgeNum',0)
                this.$router.push('/home')
                this.$store.commit('SetMenu', {menuname: '首页', url: `/home`})
            },
        }
  }
</script>
<style lang="scss" scoped>
.right-pos{
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
    .icons{
        color: #308CE9;
    }
    /deep/ .el-breadcrumb__separator{
        color: #555555;
    }
    /deep/ .el-button {
        // margin: 15px 0 5px 0;
        background: #F1F7FF;
        border-radius: 4px;
        border: 1px solid #186FD9;
        color: #0064DE;
        padding: 5px 10px;
    }
 
}

</style>